<template>
    <oa-tab-page title="通讯录">
        <div class="search-box">
            <div class="search-box-input">
                <i class="icon-search oa-icon"> </i>
                <input v-model="search_text" type="text" @input="searchFilter" placeholder="搜索联系人"/>
            </div>

        </div>
        <div class="list">
            <cube-index-list
                    :data="search_text?filters:list">
                <cube-index-list-group
                        v-for="(group, index) in (search_text?filters:list)"
                        :key="index"
                        :group="group">
                    <cube-index-list-item
                            v-for="(item, index) in group.items"
                            :key="index"
                            :item="item"
                            @select="selectItem(item)">
                        <div class="contact-item">
                            <p class="contact-item-username">{{item.user_name}}</p>
                            <p class="contact-item-phone">{{item.user_contactphone}}</p>
                        </div>
                    </cube-index-list-item>
                </cube-index-list-group>
            </cube-index-list>
        </div>

    </oa-tab-page>
</template>

<script>
    import OaTabPage from "../components/oa-tab-page";
    import ContactData from '../assets/contact'

    export default {
        components: {OaTabPage},
        name: "contact",
        data() {
            return {
                list: [],
                filters: [],
                search_text: ""
            }
        },
        methods: {
            preData() {
                let data = ContactData.Items
                let group = []

                data.forEach((item) => {
                    // if(item.Name)
                    let in_array = false
                    if (group.length > 0) {
                        group.forEach((group_item) => {
                            if (group_item.name == item.org_name) {
                                in_array = true
                            }
                        })
                    }
                    let group_item = {}
                    if (in_array) {

                        group.forEach((temp_item) => {
                            if (temp_item.name == item.org_name) {
                                group_item = temp_item
                            }
                        })
                        group_item.items.push(item)
                    } else {
                        let group_item = {name: item.org_name, items: []}
                        group_item.items.push(item)
                        group.push(group_item)
                    }
                    // if (item.org_name != group_name) {
                    //     index++
                    //     group_name = item.org_name
                    //     group[index] = {name: group_name, items: []}
                    //     console.log(group[index])
                    //     group[index].items.push(item)
                    //
                    //     // group[group_name].push(item)
                    // } else {
                    //     group[index].items.push(item)
                    // }
                })
                this.list = group
            },
            searchFilter() {

                this.filters = []

                this.list.forEach((item) => {
                    let items = item.items.filter((sub_item) => {
                        return (sub_item.user_name.indexOf(this.search_text)) > -1
                    })
                    let new_item = {name: item.name, items: items}
                    if (items.length > 0) {
                        this.filters.push(new_item)
                    }
                })
            },
            selectItem(item) {
                console.log(item)
                window.location.href = "tel:" + item.user_contactphone
            }
        },
        mounted() {
            this.preData()
        }
    }
</script>

<style scoped lang="less">
    .search-box {
        height: 54px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        .search-box-input {
            height: 36px;
            border: none;
            flex: 1;
            padding: 0 12px;
            margin-left: 12px;
            margin-right: 12px;
            border-radius: 5px;
            background: #f0f0f0;
            outline: none;
            line-height: 36px;
            font-size: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .icon-search {
                font-size: 20px;
                color: #888888;
                margin-right: 12px;
            }
            input {
                outline: none;
                border: none;
                font-size: 14px;
                color: #343a40;
                flex: 1;
                background: transparent;
            }
        }
    }

    .list {
        height: calc(~"100% - 54px");
    }

    .contact-item {
        color: #2c2c2c;
        padding: 8px 16px;
        border-bottom: solid 1px #e0e0e0;
        .contact-item-username {
            font-size: 16px;
            color: #2c2c2c;
        }
        .contact-item-phone {
            font-size: 14px;
            margin-top: 6px;
            color: #888888;
        }
    }
</style>